var renderTabelAndGraph = () => {
    layui.use(['table', 'layer'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var myChart = echarts.init(document.getElementById('data-graph'));

        var device_name = $('#data-table').attr('data-name');
        var identifier = $('#data-table').attr('data-identifier');
        var operation = $('#operation').val() || 'x';
        var result_name = $('#result-name').val() || '属性值';

        $.get('/data/', {
            'device_name': device_name,
            'identifier': identifier,
            'operation': operation,
        }).done(function (response) {
            var data = response['data'];
            var message = response['message'];

            var create_time = [];
            var value = [];

            for(let i=0; i<data.length; i++) {
                create_time[i] = data[i]['create_time'];
                value[i] = data[i]['value'];
            }

            // 配置layui.table的渲染
            table.render({
                elem: '#data-table',
                data: data,
                ceilMinWidth: 100,
                cols: [[
                    {field: 'id', title: 'ID', sort: true},
                    {field: 'create_time', title: '创建时间'},
                    {field: 'value', title: result_name, sort: true},
                ]],
                height: 400,
                page: {
                    layout: ['prev', 'page', 'next', 'count', 'skip'],
                    first: false,
                    last: false,
                    limit: 50
               }
            });

            // 配置echart图的渲染
            myChart.setOption({
                title: {
                    text: '电压数据',
                },
                xAxis: {
                    data: create_time
                },
                yAxis:{
                },
                series: [{
                    type: 'line',
                    smooth: true,
                    data: value
                }]
            });

            layer.msg(message);
        });
    });
};


// 初始化渲染
$(function () {
    renderTabelAndGraph();
});


// 执行运算按钮的点击渲染
$(function () {
    $('#execute-btn').click(function (event) {
        event.preventDefault();

        renderTabelAndGraph();
    });
});



